module.exports = {
  // --------------------------打包入口设置start---------------------------------
  /**
 * config.entry('app')就是获取默认的打包入口，一般会获取到main.js文件
 * 这里我们通过.clear()清空默认获取的打包入口，再通过.add('./src/main-prod.js')
 * 将打包路径设置成我们想要的入口即可
 */
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'development', config => {
      // 产品开发阶段的入口设置
      config.entry('app').clear().add('./src/main-dev.js')

      /**
       * 通过config.plugin找到html插件，通过.tap(args=>{})的回调函数，修改插件里的参数
       * 向args里添加一个叫做isProd的参数，设置为false，用于判断当前是开发阶段
       * ! 这样就能在index.html首页中进行判断是在哪个阶段，然后设置不同的效果了，同时判断是开发阶段，就不把CDN引入了，因为开发阶段都导入了
       */
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })

    config.when(process.env.NODE_ENV === 'production', config => {
      // 产品打包阶段的入口设置
      config.entry('app').clear().add('./src/main-prod.js')

      /**
       * ! 通过externals加载外部CDN资源，降低打包后体积
       * ? 在config.set()里面设置了main.js中import的组件，
       * ! 例如：导入的时候：import Vue from 'vue'  ----->  在这里就写成vue: 'Vue',
       * 只要遇到要用的，就会在window全局查找这个组件的引入
       * ! (我们在public/index.html中通过CDN联网引入其js，这样打包体积很小)
       */
      // TODO:'vue-router':'VueRouter'  可是我的路由不是这样的命名格式啊？？？
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

      /**
       * 通过config.plugin找到html插件，通过.tap(args=>{})的回调函数，修改插件里的参数
       * 向args里添加一个叫做isProd的参数，设置为true，用于判断当前是build打包发布阶段
       *  ! 这样就能在index.html首页中进行判断是在哪个阶段，然后设置不同的效果，并依次判断引入CDN外部插件，减小打包大小
       */
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
  }
  // --------------------------打包入口设置end---------------------------------

}
